import React from "react";
import { Card, Menu, Dropdown } from "antd";
import classNames from "classnames";
import ActionButton from "./ActionButton";
import { actions, fillinTypes, displayTypes } from "../../../constants/app";
import "./index.less";
import { WeaLocaleProvider } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

const { EDIT, SETTING, DATA, TASK, SHARE, DELETE,COPY } = actions;
const { EXCEL } = displayTypes;

export default class AppCard extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checked: props.checked
    };
    this.onActionClick = this.onActionClick.bind(this);
    this.onClick = this.onClick.bind(this);
  }
  componentWillReceiveProps(nextProps){
    const { checked:key } = this.props;
    const { checked:nextKey  } = nextProps;
    if (key!==nextKey) {
      this.setState({ checked: nextKey })
    }
  }
  onActionClick(action) {
    const { app, onActionClick } = this.props;
    onActionClick(action, app);
  }

  onClick() {
    const { app, onCheck } = this.props;
    if (app.rightLevel === '2') {
      const { checked } = this.state;
      this.setState({ checked: !checked });
      onCheck(!checked, app);
    }
  }
  dropMenuClick = ({ key }) => {
    const { app } = this.props;
    this.onActionClick(key, app);
  }

  render() {
    const { checked } = this.state;
    const { app, style } = this.props;
    const { rightLevel, displayType, fillinType, displayTypespan, fillinTypespan, dataTotalspan = 0 } = app;
    const bodyStyle = { padding: '16px 16px 32px', height: '100%' };
    const actionDisabled = app.isSystem === '1' || app.rightLevel < 2;
    const menu = (
      <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@zwngzo`} onClick={this.dropMenuClick}>
        <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@1sedmv`} key={SHARE} >{getLabel('119', '共享')}</Menu.Item>
        <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@i0qorq`} key={DELETE} >{getLabel('502286', '删除')}</Menu.Item>
        <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@q45q00`} key={COPY} >{getLabel('528574','另存为')}</Menu.Item>
      </Menu>) ;
    return (
      <div className={classNames('edc-app-card', { selected: checked })} style={style}>
        <Card ecId={`${this && this.props && this.props.ecId || ''}_Card@zqr28e`}
          bodyStyle={bodyStyle}
          onClick={this.onClick}
          extra={rightLevel === '2'?(<Dropdown ecId={`${this && this.props && this.props.ecId || ''}_Dropdown@xcrhgf`} overlay={menu}><i className="icon-mode-ellipsis"></i></Dropdown>):undefined}
        >
          <div className='eac-top'>
            <h4 className='wea-f14 f-ellipsis'>
              <span>{app.name}</span>
            </h4>
            <p className='ea-type'>
              <span className={classNames({ highlight: displayType === EXCEL })} >{displayTypespan}</span>
              <span className={classNames({ highlight: fillinType === fillinTypes.MULTI })}>{fillinTypespan}</span>
            </p>
            <div style={{ color: '#888' }}>
              {app.creatorspan}<span style={{ paddingLeft: 5 }}>{app.createDate} {app.createTime}</span>
            </div>
          </div>
          <div className='eac-bottom wea-f12'>
            {<ActionButton ecId={`${this && this.props && this.props.ecId || ''}_ActionButton@2ekvds`} action={EDIT} tip={getLabel('501169', '编辑')} onClick={this.onActionClick} disabled={actionDisabled} >{getLabel('501169', '编辑')}</ActionButton>}
            {<ActionButton ecId={`${this && this.props && this.props.ecId || ''}_ActionButton@b6ex7l`} action={SETTING} tip={getLabel('383278', '设计')} onClick={this.onActionClick}>{getLabel('383278', '设计')}</ActionButton>}
            <ActionButton ecId={`${this && this.props && this.props.ecId || ''}_ActionButton@o56n92`} action={DATA} tip={getLabel('563', '数据')} onClick={this.onActionClick} >{getLabel('563', '数据')}({dataTotalspan})</ActionButton>
            <ActionButton ecId={`${this && this.props && this.props.ecId || ''}_ActionButton@8s3e0r`} action={TASK} tip={app.fillinType === fillinTypes.FREE ? getLabel(502605, '发布') : getLabel('1332', '任务')} onClick={this.onActionClick} ></ActionButton>
          </div>
        </Card>
      </div>
    );
  }
}

AppCard.defaultProps = {
  app: {},
  style: {},
  checked: false,
  onActionClick: () => { },
  onCheck: () => { }
};